<template>
  <div class="wrap">
    <el-button
      @click="submitExcel"
      type=""
      icon=""
      class="anniu"
      v-if="state != 0"
      >提交</el-button
    >
    <header>
      <div class="header">资产负债表</div>
      <div class="bottom">
        <!-- isTableHeader = false -->
        <div class="company">
          编制单位：
          <span @dblclick="isTableHeader = false" v-if="isTableHeader">{{
            headerData.companyName
          }}</span>
          <span v-else
            ><el-input
              @keyup.enter.native="isTableHeader = true"
              @blur="isTableHeader = true"
              v-model="headerData.companyName"
          /></span>
        </div>
        <div class="company-time">
          <div @dblclick="isCompanyTime = false" v-if="isCompanyTime">
            {{ headerData.companyTimeArr[0] }} 至
            {{ headerData.companyTimeArr[1] }}
          </div>
          <div style="width: 100%; flex: 0.7" v-else>
            <el-date-picker
              @blur="isCompanyTime = true"
              v-model="headerData.companyTimeArr"
              type="daterange"
              range-separator="至"
              value-format="yyyy年MM月dd日"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div>单位：元</div>
      </div>
    </header>
    <ExcelCom
      v-if="hotData"
      :title="itemData"
      :hot="hotData"
      :footer="footerData"
      :setting="setting"
    />
    <div style="height: 111px"></div>
  </div>
</template>
<script>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";

import "../../node_modules/handsontable/dist/handsontable.full.css"; // 样式
import "handsontable/languages"; //
import { queryReport, addReport, getReportDetail } from "@/api/shenji";

import ExcelCom from "@/components/ExcelCom";

export default {
  components: {
    // 注册组件
    ExcelCom,
  },
  name: "exceljs-demo",
  props: ["state", "liabilityData"],
  data() {
    return {
      headerData: {
        companyName: "万科企业股份有限公司",
        companyTimeArr: ["2022年11月01日", "2022年12月11日"],
        unit: "元",
      },
      footerData: [
        ["经办人：", "受理人："],
        ["经办人证件类型：", "受理人税务机关："],
        ["经办人证件号码：", "受理日期："],
        ["代理机构：", ""],
        ["代理机构统一社会信用代码:", ""],
      ], // 底部表格
      itemData: [
        {
          title: "资产",
          name: "assets",
        },
        {
          title: "行次",
          name: "rowAssets",
        },
        {
          title: "期末余额",
          name: "afterAssets",
        },
        {
          title: "年初余额",
          name: "beforeAssets",
        },
        {
          title: "负债及所有者权益",
          name: "debt",
        },
        {
          title: "行次",
          name: "rowDebt",
        },
        {
          title: "期末余额",
          name: "afterDebt",
        },
        {
          title: "年初余额",
          name: "beforeDebt",
        },
      ],
      hotData: [
        {
          assets: "流动资产 ：",
          rowAssets: "",
          afterAssets: "",
          beforeAssets: "",
          debt: "流动负债：",
          rowDebt: "",
          afterDebt: "",
          beforeDebt: "",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
        {
          assets: "货币资金 ：",
          rowAssets: "1",
          afterAssets: "1231234",
          beforeAssets: "5231231",
          debt: "短期借款：",
          rowDebt: "32",
          afterDebt: "1241",
          beforeDebt: "45334",
        },
      ], // 主体表格
      setting: {
        // 行设置
        rows: {
          colWidth: [250, 80, 150, 150, 250, 80, 150, 150],
          rowHeight: 35,
        },
        // 列设置
        columns: {},
        // 对齐方式
        align: [],

        // footer
        footer: {
          rows: {
            colWidth: [630, 630],
            rowHeight: 35,
          },
        },
      },

      tableHeader1: "",
      liability: "",

      // 头部
      isTableHeader: true,
      isCompanyTime: true,
      year: "",
    };
  },
  created() {
    this.year = this.$route.query.year;
    if (this.liabilityData && this.$route.query.state == 0) {
      this.liability = JSON.parse(this.liabilityData);
      console.log(this.liability,'hsgjasd');
      this.headerData = this.liability.headerExcel;
      this.footerData = this.liability.footerExcel;
      this.hotData = this.liability.mainExcel;
    }
  },
  mounted() {},
  methods: {
    submitExcel() {
      addReport({
        fuzhai: JSON.stringify({
          headerExcel: this.headerData,
          mainExcel: this.hotData,
          footerExcel: this.footerData,
        }),
        year: this.year,
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success",
            });
            // this.erci="刷新认证状态"
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.$message({
            showClose: true,
            message: err.data.msg,
            type: "error",
          });
          console.log(err);
        });
    },
  },
};
</script>
<style scoped lang="scss">
.wrap {
  overflow: auto;
  margin: auto;
  width: 100%;
  width: 1260px;
  .header {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    border: none;
  }
  .bottom {
    margin: 20px 0 2px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    div {
      // padding-left:px;
      flex: 1;
    }
    div:last-of-type {
      flex: 0.5;
      text-align: right;
    }
  }
}
.company,
.company-time {
  display: flex;
  align-items: center;
}
.el-table-column {
  color: #333 !important;
}
.column-hot {
  /* background-color: #f15; */
  font-size: 30px;
}
tr {
  border: none !important;
}
td.custom-cell {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  border: none;
  /* height: 40px; */
  /* background-color: #37bc6c; */
}
.wtHolder {
  overflow: normal !important;
}
td.custom-cell-last {
  color: #333;
  border-bottom: none;
}
.htCore {
  overflow: hidden !important;
}
</style>
